<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor para Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Stock Quotes - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c2 {border-width:0}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials/index.html">Tutoriales</a> &gt; Stock Quotes&gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>                
                StockQuotes              
              </h1>
              <h2>
                Que estás construyendo
              </h2>
              <p>
                Del mismo modo que puedes acceder a páginas web desde tu teléfono -- por ejemplo, para mirar el precio de una acción de la bolsa -- puedes hacerlo con App Inventor. Esta aplicación permite al usuario introducir el símbolo de una acción, para entonces buscar su precio en Yahoo! Finanzas y muestra del precio en el teléfono.
              </p>
              <p>
                Para realizar este tutorial se supone que ya estas familiarizado con los conceptos básicos de App Inventor: el uso del Diseñador de componentes para construir una interfaz de usuario, y el uso del Editor de bloques para especificar controladores de evento. Si no estas familiarizado con estos conceptos básicos, prueba a realizar algunos de los <a href="http://appinventor.googlelabs.com/learn/tutorials/index.html">tutoriales básicos</a> antes de continuar.
              </p>
              <h2>
                Introducción
              </h2>
              <p>
                Este tutorial incluye:
              </p>
              <ol>
                <li>Aceptar la introducción de texto por el usuario para especificar el símbolo de una acción.
                </li>
                <li>El uso del componente Web para preguntar a Google Finance por el ultimo precio de la acción.
                </li>
                <li>Mostrando el resultado.
                </li>
              </ol>
              <h2>
                Primeros pasos
              </h2>
              <p>
                Conéctate al sitio web de App Inventor  y comienza un nuevo proyecto. Nombralo StockQuotes, y ajusta también el <span class="ButtonText">Title</span> (título) de la pantalla a "Stock Quotes". Abre el editor de bloques y conéctalo al teléfono.
              </p>
              <h2>
                Prepara los componentes 
              </h2>
              <p>
                Usa el diseñador de componentes para crear esta interfaz para el usuario. Cuando la termines debe parecerse a la imagen de abajo. Hay instrucciones adicionales bajo la imagen.
              </p>
              <div class="imagecontainer">
                <img alt="" height="630" src="StockQuotesAssets/components1.png" width="579">
              </div>
              <p>
                Crea los siguientes componentes arrastándolos desde la Paleta al Visor.
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de componente
                      </td>
                      <td class="tbl-header">
                        Grupo de la paleta
                      </td>
                      <td class="tbl-header">
                        Como lo llamarás
                      </td>
                      <td class="tbl-header">
                        Propósito del componente
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">TextBox</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">StockSymbolTextBox</span>
                      </td>
                      <td>
                        Donde el usuario introduce el símbolo de la acción
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Button</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">GetQuoteButton</span>
                      </td>
                      <td>
                        Para pedir el precio de la acción
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Label</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">ValueLabel</span>
                      </td>
                      <td>
                        Para mostrar el precio de la acción
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Web</span>
                      </td>
                      <td>                        
                        Other stuff                      
                      </td>
                      <td>
                        <span class="ButtonText">Web1</span>
                      </td>
                      <td>
                        Para pedir y recibir el precio de la acción
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Mantén las propiedades predeterminadas a excepción de los siguientes cambios:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Componente
                      </td>
                      <td class="tbl-header">
                        Acción
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">StockSymbolTextBox</span>
                      </td>
                      <td>
                        Ajusta su propiedad <span class="ButtonText">Hint</span> (sugerencia) a "Enter a stock symbol" (introduce el simbolo de una acción). Borra el texto de la propiedad <span class="ButtonText">Text</span> .
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">GetQuoteButton</span>
                      </td>
                      <td>
                        Ajusta su propiedad <span class="ButtonText">Text</span> a "Get Stock Quote" (obtener el precio de la acción).
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ValueLabel</span>
                      </td>
                      <td>
                        Borra su propiedad <span class="ButtonText">Text</span>.
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <h2>
                La API de Yahoo! Finance
              </h2>
              <p>
                Muchos servicios web proveen una <em>Interfaz de programación de aplicaciones</em> (API) para permitir a los desarrollares que sus programas se conecten al servicio. Uno de los modos de encontrar APIs es a través del sitio <a href="http://programmableweb.com">http://programmableweb.com</a> o simplemente haciendo una búsqueda del nombre de un servicio y "API".
              </p>
              <p>
                La API de Yahoo! La API de Yahoo Finance API está documentada ampliamente en <a href="http://www.gummy-stuff.org/Yahoo-data.htm">http://www.gummy-stuff.org/Yahoo-data.htm</a>. Lo mas destacado es que puedes obtener el ultimo precio actualizado de una acción con el símbolo "GOOG", por ejemplo, con la URL <a href="http://finance.yahoo.com/d/quotes.csv?f=l1&amp;s=GOOG">http://finance.yahoo.com/d/quotes.csv?f=l1&amp;s=GOOG</a>. La sección "f=l1" (letra minúscula L, seguida del número 1) indica que deseamos el ultimo precio actualizado, y la sección "s=GOOG" dice que queremos información de las acciones cuyo símbolo es "GOOG". El resultado es devuelto en formato CVS (valores separados por coma), el cual te puede resultar familiar por las hojas de cálculo. Como en este caso el resultado que será devuelto es un solo número, como "511.5", no incluirá ninguna coma. (Las comas se usarán si pedimos varios datos de Yahoo!, como el nombre de la compañía y el volumen diario de negocio.)
              </p>
              <h2>
                Añade comportamientos a los componentes
              </h2>
              <h3>
                Pidiendo los datos
              </h3>
              <p>
                Los bloques para realizar la petición web se muestran y están detallados a continuación:
              </p>
              <div class="imagecontainer">
                <img alt="" height="179" src="StockQuotesAssets/request-data.png" width="615">
              </div>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">GetQuoteButton.Click</span>
                      </td>
                      <td>                        
                        GetQuoteButton                      
                      </td>
                      <td>
                        Maneja el clic en el botón "Get Quote".
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set Web1.Url to</span>
                      </td>
                      <td>                        
                        Web1                      
                      </td>
                      <td>
                        Especifica la URL para la petición.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">call make text</span>
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        Encadena las partes de la URL
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> (http://finance.yahoo.com/d/quotes.csv?f=l1&amp;s=)                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        Especifica la primera parte invariable de la URL.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">StockSymbolTextBox.Text</span>
                      </td>
                      <td>                        
                        StockSymbolTextBox                      
                      </td>
                      <td>
                        Toma el símbolo de la acción de la caja de texto.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">call Web1.Get</span>
                      </td>
                      <td>                        
                        Web1                      
                      </td>
                      <td>
                        Realiza la petición web.
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                El significado es: Cuando se hace clic en el botón <span class="ButtonText">GetQuoteButton</span>:
              </p>
              <ol>
                <li>Se construye la URL del componente Web encadenando "http://finance.yahoo.com/d/quotes.csv?f=l1&amp;s=" ( lo cual has debido copiar y pegar en el bloque <span class="ButtonText">text</span> ) y el símbolo introducido por el usuario (<span class="ButtonText">StockSymbolTextBox.Text</span>).
                </li>
                <li>Petición de la página especificada por la URL. (Esto es como presionar intro tras introducir una URL en tu navegador.)
                </li>
              </ol>
              <h3>
                Recibiendo los datos
              </h3>
              <p>
                Cuando la respuesta de la web llega, el evento <span class="ButtonText">Web.GotText</span> se llena con cuatro parámetros (de los cuales solo usaremos algunos en esta aplicación):
              </p>
              <ol>
                <li>
                  <span class="ButtonText">url</span>: La URL de la petición original (la cual es útil si las peticiones se realizan con diferentes URLs).
                </li>
                <li>
                  <span class="ButtonText">responseCode</span>: <a href="http://en.wikipedia.org/wiki/List_of_HTTP_status_codes">el código de estado HTTP</a>, el cual indica si la petición se ha realizado correctamente o como ha fallado; por ejemplo, 200 indica que la solicitud ha sido correcta, 404 que la pagina no ha sido encontrada, etc.
                </li>
                <li>
                  <span class="ButtonText">responseType</span>: <a href="http://en.wikipedia.org/wiki/Mime_type">el tipo MIME</a> de la respuesta, como "text/csv" en esta aplicación, o "image/jpeg", etc.
                </li>
                <li>
                  <span class="ButtonText">responseContent</span>: los datos devueltos, como "511.5".
                </li>
              </ol>
              <p>
                Aquí tienes una imagen y la tabla de los bloques que debes crear:
              </p>
              <div class="imagecontainer">
                <img alt="" height="337" src="StockQuotesAssets/receive-data.png" width="606">
              </div>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Web1.GotText</span>
                      </td>
                      <td>                        
                        Web1                      
                      </td>
                      <td>
                        Especifica que hacer cuando la respuesta es devuelta por la web.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ifelse</span>
                      </td>
                      <td>                        
                        Control                      
                      </td>
                      <td>
                        Proporciona diferentes comportamientos dependiendo de si la petición tuvo éxito.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">value responseCode</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        El código de respuesta devuelto por la web, el cual...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">=</span>(bloque igual)
                      </td>
                      <td>                        
                        Math                      
                      </td>
                      <td>
                        ...se comprueba si es igual a...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">number</span> (200)                      
                      </td>
                      <td>                        
                        Math                      
                      </td>
                      <td>
                        ...200, el código para las respuestas web validas.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set ValueLabel.Text to</span>
                      </td>
                      <td>                        
                        ValueLabel                      
                      </td>
                      <td>
                        Muestra el resultado en la pantalla.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">call make text</span>
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        Construye el resultado encadenando...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("Current value: ")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        ...el texto "Current value:" (valor actual) y...
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">value responseContent</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        ...el valor devuelto por la web.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set ValueLabel.Text to</span>
                      </td>
                      <td>                        
                        ValueLabel                      
                      </td>
                      <td>
                        Muestra un mensaje de error.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("Error getting stock quote")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        El mensaje de error
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Aquí tienes una descripción del comportamiento del bloque:
              </p>
              <ol>
                <li>Si el código de respuesta indica que la respuesta es correcta (= 200), cambia la etiqueta al encadenado de "Current value: " y el dato devuelto (por ejemplo, 511.5).
                </li>
                <li>Si no es así, cambia la etiqueta a "Error getting stock quote" (Error al obtener la cotización de las acciones).
                </li>
              </ol>
              <h2>
                Revisión
              </h2>
              <p>
                Aquí están algunas de las ideas introducidas en este tutorial:
              </p>
              <ol>
                <li>El uso de una Interfaz de programación de aplicaciones (API)
                </li>
                <li>Realizar una petición con el componente Web
                </li>
                <li>Comprobar si la petición web fue exitosa
                </li>
                <li>Mostrar en pantalla la información devuelta por la web
                </li>
              </ol>
              <p>
                Estas ideas serán desarrolladas con mayor profundidad en la segunda parte de este tutorial, la cual está en desarrollo.
              </p>
              <h2>
                Créditos
              </h2>
              <p>
                Este tutorial está basado en <a href="http://appinventorblog.com/2011/06/02/app-inventor-has-a-new-component-the-web/">una aplicación creada por el Profesor David Wolber</a> y depende de Yahoo! Finance API.
              </p>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license"><img alt="Creative Commons License" class="c2" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              El trabajo original de Google se ha modificado<br>
              El trabajo modificado fue traducido del Inglés al Español<br>
              <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
